<template>
    <div class="box registerBox">
      <van-nav-bar
        title="注册"
        right-text="登录"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <div class="header">
        <div class="title">
          <van-icon name="smile-o" />
          <span>甄优选</span>
        </div>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="tel"
          clearable
          name="tel"
          placeholder="手机号"
          :right-icon="tellTest"
          :rules="[{ required: true, message: '不符合，请输入正确的手机号', validator: telTest }]"
        />
        <van-field
          v-model="sms"
          center
          clearable
          name="sms"
          placeholder="请输入短信验证码"
          :right-icon="smssTest"
          :rules="[{ required: true, message: '不符合，请输入正确的验证码', validator: smsTest }]"
        >
          <template #button>
            <van-button size="small" type="primary" :disabled="telSms" @click="onSend">{{smsTitle}}</van-button>
          </template>
        </van-field>
        <van-field
          v-model="password"
          clearable
          type="password"
          name="password"
          placeholder="密码"
          :right-icon="pwwTest"
          :rules="[{ required: true, message: '不符合，请输入字母、数字、“_”组合，6-12个字符', validator: pwTest }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit" :disabled="allTest">注册</van-button>
        </div>
      </van-form>
    </div>
</template>
<script>
import Vue from 'vue'
import { send, register } from '@/api/request.js'
import { NavBar, Form, Field, Button, Toast, Icon } from 'vant'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Icon)

export default {
  data () {
    return {
      tel: '',
      sms: '',
      password: '',
      smsTitle: '发送验证码'
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/login')
    },
    onSend () {
      let time = 60
      this.smsTitle = time + 's后重新发送'
      const t = setInterval(() => {
        if (time === 1) {
          clearInterval(t)
          this.smsTitle = '重新发送验证码'
        } else {
          time--
          this.smsTitle = time + 's后重新发送'
        }
      }, 1000)
      send({ tel: this.tel }).then(data => {
        switch (data.data.code) {
          case 200:
            Toast('验证码发送成功')
            break
          case 201:
            Toast('验证码再次发送成功')
            break
          case 202:
            Toast('手机号已被注册')
            break
          case 203:
            Toast(data.data.title)
            break
        }
      })
    },
    onSubmit (v) {
      const that = this
      register({
        username: v.username,
        password: v.password,
        tel: v.tel,
        code: v.sms
      }).then(data => {
        switch (data.data.code) {
          case 200:
            Toast({
              message: '注册成功',
              onClose () {
                that.$router.push('/login')
              }
            })
            break
          case 201:
            Toast('用户名重复')
            break
          case 202:
            Toast('请先发送验证码')
            break
          case 203:
            Toast('手机号已被注册')
            break
          case 204:
            Toast('用户名已被注册')
            break
        }
      })
    },
    pwTest () {
      return /^[\w]{6,12}$/.test(this.password)
    },
    smsTest () {
      return /^\d{6}$/.test(this.sms)
    },
    telTest () {
      return /^1[3-9]\d{9}$/.test(this.tel)
    }
  },
  computed: {
    allTest () {
      return this.pwTest === '' || this.telTest === '' || this.smsTest === ''
    },
    pwwTest () {
      if (/^[\w]{6,12}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    tellTest () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      }
      return ''
    },
    smssTest () {
      if (/^\d{6}$/.test(this.sms)) {
        return 'success'
      }
      return ''
    },
    telSms () {
      // 发送验证码是否可点,根据是否输入手机号和当前按钮内容 设置
      return this.telTest === '' || this.smsTitle !== '发送验证码'
    }
  }
}
</script>
<style lang="scss">
.registerBox{
  .van-nav-bar__left{
    i{
      color: #000;
    }
  }
  .van-nav-bar__title{
    font-family: KaiTi;
    font-size: 24px;
    font-weight: bolder;
  }
  .van-nav-bar__text{
    color: #ee0a24;
  }
  .header{
    padding: 0.6rem 0;
    .title{
      text-align: center;
      i{
        font-size: 30px;
        margin-right: 0.06rem;
      }
      span{
        font-size: 40px;
        font-family: KaiTi;
      }
    }
  }
}
</style>
